<template>
  <el-dialog :title="`增加子任务 # ${next}`" :visible="visible" @update:visible="close" width="60%" top="8vh" append-to-body>
    <el-row>
      <el-col :span="24">
        <el-form :model="groupjob" :rules="rules" ref="groupjob" label-width="100px" :inline="true" class="formstyle">
          <el-row>
            <el-col :span="12">
              <el-form-item label="任务名称" prop="title">
                <el-input v-model="groupjob.title"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务类型">
                <el-select v-model="groupjob.type" placeholder="请选择">
                  <el-option v-for="(v,k) in options" :key="k" :label="v" :value="k"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <p v-show="groupjob.type === 'spark'">参考 livy api 文档：https://livy.incubator.apache.org/docs/latest/rest-api.html</p>
              <p v-show="groupjob.type === 'datax'">参考 datax api 文档：https://github.com/alibaba/DataX</p>
              <p v-show="groupjob.type === 'shell'">参考 node.js 文档：http://nodejs.cn/api/child_process.html execFile 函数</p>
              <el-form-item label="运行参数" prop="args" v-show="groupjob.type !== 'shell'">
                <el-input type="textarea" v-model="groupjob.args" rows="7" cols="80" placeholder="必须为json格式"></el-input>
              </el-form-item>
              <!-- shell 参数设置 -->
              <el-form-item label="shell脚本" prop="file" v-show="groupjob.type === 'shell'">
                <el-input type="textarea" v-model="groupjob.file" rows="7" cols="80" placeholder="#! /bin/bash 开头的shell脚本，脚本超时时间默认10分钟，输出不能超过200k，超出时进程会被终止。"></el-input>
              </el-form-item>
              <el-form-item label="options" prop="options" v-show="groupjob.type === 'shell'">
                <el-input type="textarea" v-model="groupjob.options" rows="3" cols="80" placeholder="child_process.execFile 函数的 options 参数，必须为json格式。"></el-input>
              </el-form-item>
                
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="说明" prop="description">
                <el-input type="textarea" v-model="groupjob.description" rows="1" cols="80"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <center>
          <span slot="footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </span>
        </center>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script type="text/javascript">
  export default {
    props: ['visible', 'next'],
    data () {
      return {
        groupjob: {
          type: 'spark',
          args: '{}',
          file: '',
          options: ''
        },
        options: {
          spark: 'spark 任务',
          datax: 'datax 任务',
          shell: 'shell 任务'
        },
        rules: {
          title: [
            { required: true, message: '请输入任务名称', trigger: 'change' },
          ],
          args: [
            { required: true, message: '请输入 josn 格式的运行参数', trigger: 'change' }
          ],
          description: [],
          file: [],
          options: []
        }
      }
    },
    methods: {
      submitForm() {
        this.$refs['groupjob'].validate((valid) => {
          if (valid) {
            //shell任务校验
            if (this.groupjob.type === 'shell') {
              if (this.groupjob.options) {
                try {
                  this.groupjob.options = JSON.parse(this.groupjob.options)
                } catch(e) {
                  this.$message.error('options必须为json格式：' + e)
                  return false
                }
              }
            }

            try {
              this.groupjob.args = JSON.parse(this.groupjob.args)
            } catch(e) {
              this.$message.error('参数必须为json格式：' + e)
              return false
            }
            this.$emit('add', Object.assign({}, this.groupjob))
            this.close()
          } else {
            return false;
          }
        });
      },
      close() {
        this.$refs['groupjob'].resetFields();
        this.$emit('update:visible', false)
      }
    }
  }
</script>